<template>
	<div class="dynamicContent w944">
		<alert ref="alert"></alert>
		<deleteAlert ref="deleteAlert"></deleteAlert>
		<div class="label_top">
			<button @click="reBack"><i><&nbsp;</i>返回</button>
			<p>{{updateTitle}}的动态<img src="../../assets/qudaoImg/anonymous.png" v-if="this.cryptonym==1"><i class="cancellation" v-if="userStatus!=1">（已注销）</i></p>
		</div>
		<div class="content">
			<div class="topLine clearFix">
				<span>动态内容</span>
				<em>发布时间：{{createTime}}</em>
			</div>
			<div class="dynamicDesc">
				<div>{{dtHtDesc}}</div>
				<ul class="clearFix">
					<li v-for="(item,index) in headingArr" :key="index">
						<el-popover placement="right" width="300" trigger="click">
  							<img :src="item" style="width: 100%">
  							<el-button slot="reference"><img :src="item"></el-button>
						</el-popover>
					</li>
				</ul>
			</div>
		</div>
		<div class="content">
			<div class="topLine">
				<span>评论</span>
			</div>
			<div class="dynamicComment">
				<div class="commentList" v-for="(commment,index) in commmentArr" :key="index">
					<div class="commentImg">
						<img :src="commment.headimg">
					</div>
					<div class="commentCont">
						<div class="commentUser clearFix">
							<span><img src="../../assets/qudaoImg/anonymous.png" v-if="cryptonym==1">{{commment.nickname}}<b class="cancellation" v-if="userStatus==0" style="font-weight: normal;">（已注销）</b></span>
							<i class="el-icon-delete" @click="handleDelete(commment)"></i>
							<em>发布时间：{{commment.createTime}}</em>
							
						</div>
						<div class="commentText">
							{{commment.dtHtPlDesc}}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="fenyeMargin">
			<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total" style="text-align: right;"></el-pagination>
		</div>
	</div>
</template>
<script>
	import alert from '../../components/Alert.vue';
	import deleteAlert from '../../components/deleteAlert.vue';
	export default{
		data(){
			return{
				countId:'',
				updateTitle:'',
				cryptonym:'',
				userStatus:'',
				createTime:'',
				dtHtDesc:'',
				headingArr:[],
				commmentArr:[],
				pagesize: 15,
		        currentpage: 1,
		        total: 1
			}
		},
		methods:{
			getParams() {
				this.countId = this.$route.params.countId;
			},
			getTableList(){
				this.$ajax({
                    url: this.$root.jifuUrl + '/mns/qzDtHt/selectQzDtById',
					headers:{'ContentType': 'application/json; charset=utf-8'},
                    method: 'POST',
                    data: {
						page:this.currentpage,
						num:this.pagesize,
						id:this.countId
					},
                    success: res => {
                        if(res.data.code == 200) {
							var backObj = res.data.data;
							this.updateTitle = backObj.nickname;
							this.cryptonym = backObj.cryptonym;
							this.userStatus = backObj.userStatus;
							this.createTime = backObj.createTime;
							this.dtHtDesc = backObj.dtHtDesc;
							this.headingArr = backObj.dtHtPic.split(',');
							this.commmentArr = backObj.plList.list;
							this.total=backObj.plList.pageParam.items;
                        }
                    }
                });
			},
			handleDelete(item){
				this.transitionRow = item.id;
				this.$rootFunction().rootDelete();
			},
			deleteSubmit() {
				let arr = [];
				arr.push(this.transitionRow);
				this.$ajax({ 
					url: this.$root.jifuUrl + "/mns/qzDtHtPl/deleteQzDtHtPl",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data:arr,
					success: res => {
						if(res.data.code == 200) {
							this.$rootFunction().deleteResSuccess();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getTableList();
			},
			reBack(){
				this.$router.go(-1);
			}
		},
		components: {
			alert,
			deleteAlert
		},
		mounted(){
			this.getParams();
			if(this.countId==null){
				this.$store.commit('GET_dynamicContent');
				var s =this.$store.state.dynamicContent;
				this.countId=s.countId;
				this.updateTitle=s.updateTitle;
				this.cryptonym=s.cryptonym;
			};
			this.getTableList();
			window.addEventListener("beforeunload",()=>{
				s={
					countId:this.countId,
					updateTitle:this.updateTitle,
					cryptonym:this.cryptonym
				}	
				this.$store.commit('SET_dynamicContent', s);
			});
		}
	}
</script>
<style>
	.dynamicContent{padding-bottom: 100px}
	.dynamicContent .label_top img{position: relative;top: 2px}
	.dynamicContent .content{width: 98%;overflow: hidden;margin-left: 2%;margin-bottom: 20px}
	.dynamicContent .content .topLine{border-bottom: 1px solid #ccc;padding: 0 20px 5px 0;color: #333}
	.dynamicContent .content .topLine em{font-style: normal;display: inline-block;float: right;}
	.dynamicContent .content .dynamicDesc{overflow: hidden;padding: 10px 20px;color: #444}
	.dynamicContent .dynamicDesc ul{overflow: hidden;padding: 20px 0}
	.dynamicContent .dynamicDesc ul li{width: 130px;height: 130px;margin: 0 20px 20px 0;float: left;}
	.dynamicContent .dynamicDesc ul li .el-button{padding: 0;border: none}
	.dynamicContent .dynamicDesc ul li img{display: block;width: 100%;border-radius: 5px;}
	.dynamicComment{overflow: hidden;}
	.dynamicComment .commentList{padding: 20px 0;border-bottom: 1px solid #ccc;overflow: hidden;}
	.dynamicComment .commentImg{width: 40px;height:40px;float: left;}
	.dynamicComment .commentImg img{width: 100%;height: 100%;border-radius: 4px}
	.dynamicComment .commentCont{width: 800px;float: left;margin-left: 20px}
	.dynamicComment .commentCont .commentUser{padding-bottom: 10px;color: #333}
	.dynamicComment .commentCont .commentUser em{font-style: normal;display: inline-block;float: right;font-size: 14px;color: #444}
	.dynamicComment .commentCont .commentUser i{font-style: normal;display: inline-block;float: right;margin-left: 22px;cursor: pointer;color:#FF2D51;}
	.dynamicComment .commentText{font-size: 14px;color: #333}
	.changePage{margin-top: 15px;text-align: right;}
	.dynamicContent .deleteSubmit{margin-right: 80px}
</style>
